<template>
    <div class="order-income">
        <div class="search-form zw-form-layout">
            <el-form ref="formRef" :model="searchForm" label-width="auto">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="订单编号" prop="orderSn">
                            <el-input v-model="searchForm.orderSn" placeholder="订单编号"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单状态" prop="orderStatus">
                            <el-select clearable v-model="searchForm.orderStatus" placeholder="全部状态">
                                <el-option label="全部状态" value="" />
                                <el-option
                                    v-for="item in statusOptions"
                                    :label="item.label"
                                    :value="item.value"
                                    :key="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="来源门店" prop="shopId">
                            <el-select clearable v-model="searchForm.shopId" placeholder="全部门店">
                                <el-option label="全部" :value="0" />
                                <el-option
                                    v-for="item in shopList"
                                    :key="item.shopId"
                                    :label="item.shopName"
                                    :value="item.shopId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="19">
                        <el-form-item label="下单时间" prop="createdAt">
                            <div class="picker-container">
                                <el-date-picker
                                    v-model="searchForm.createdAt"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    @change="dateChange"
                                    class="place-order-date" />
                                <div class="search-time">
                                    <div
                                        class="search-time-item"
                                        :class="{ 'search-time-item-active': item.active }"
                                        v-for="(item, index) in Data.timeList"
                                        :key="index"
                                        @click="clickSearchTime(index, item)">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col class="zw-table-btns">
                <el-button type="primary" v-auth="'withdraw_income:export'" @click="orderExport"> 导出 </el-button>
            </el-col>
        </el-row>

        <el-table :data="Data.tableList">
            <el-table-column label="订单编号" align="center" min-width="160" fixed="left" prop="">
                <template v-slot="{ row }">
                    <div class="left">
                        <span class="link" @click="viewDetail(row)">{{ row.orderSn }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="来源门店" prop="shopName.shopName" align="center" width="120"> </el-table-column>
            <el-table-column label="订单类型" prop="orderTypeName" align="center" width="110"></el-table-column>
            <el-table-column align="center" label="订单金额">
                <template #header>
                    <div class="tip">
                        订单金额
                        <el-tooltip
                            effect="dark"
                            content="订单金额=商品销售价*数量-活动优惠金额-优惠券优惠金额-改价优惠金额+运费"
                            placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                </template>
                <el-table-column prop="orderAmountTotal" label="订单金额（元）" align="center" min-width="130">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.orderAmountTotal, 100) || 0 }}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="订单金额（积分）" align="center" min-width="140">
                    <template v-slot="{ row }">
                        <span v-if="row.orderType == 6">
                            {{ floatDivide(row.totalPoints, 100) || 0 }}
                        </span>
                        <span v-else>0</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="积分抵扣">
                <el-table-column prop="" label="积分抵扣（数量）" align="center" min-width="140">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.totalPoints, 100) || 0 }}
                    </template>
                </el-table-column>
                <el-table-column prop="totalPointsFee" label="积分抵扣（元）" align="center" min-width="130">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.totalPointsFee, 100) || 0 }}
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="实付金额（元）" prop="amountTotal" align="center" min-width="90">
                <template v-slot="{ row }">
                    {{ floatDivide(row.amountTotal, 100) || 0 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="已退款">
                <el-table-column prop="refundUsePoints" label="已退款（积分）" align="center" min-width="130">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.refundUsePoints, 100) || 0 }}
                    </template>
                </el-table-column>
                <el-table-column prop="refundPaymentFee" label="已退款（元）" align="center" min-width="110">
                    <template v-slot="{ row }">
                        {{ floatDivide(row.refundPaymentFee, 100) || 0 }}
                    </template>
                </el-table-column>
            </el-table-column>
            <!-- 与订单状态没干系 -->
            <el-table-column label="订单状态" prop="receiveOrderStatusName" align="center" width="85">
            </el-table-column>
            <el-table-column label="下单时间" prop="createdAt" align="center" width="110">
                <template v-slot="{ row }">
                    {{ row.createdAt || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="支付时间" prop="payAt" align="center" width="110">
                <template v-slot="{ row }">
                    {{ row.payAt || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="收货时间" prop="receivedAt" align="center" width="110">
                <template v-slot="{ row }">
                    {{ row.receivedAt || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="完成时间" prop="finishedAt" align="center" width="110">
                <template v-slot="{ row }">
                    <span v-if="row.orderStatus == 8">-</span>
                    <span v-else> {{ row.finishedAt || '-' }} </span>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 15px">
            <Pagination
                :total="Data.totalCount"
                :page-size="searchForm.perPage"
                :current-page="searchForm.page"
                @sizeChange="sizeChange"
                @pageChange="pageChange" />
        </div>
    </div>
</template>
<script setup name="orderList">
import { ref, reactive, onMounted, onUnmounted, inject } from 'vue';
import { format, floatDivide, packSelectObjUtil, dealObjectEmptyValue, exportExc } from '@/commons/utils';
import { getShopListHook } from '@/hooks';
import Pagination from '@/components/Pagination.vue';
import request from '@/request';

const searchForm = reactive({
    perPage: 10,
    page: 1,
    shopId: 0,
    createdAt: [],
    orderStatus: ''
});

const statusOptions = [
    {
        value: 6,
        label: '拼团中'
    },
    {
        value: 5,
        label: '部分发货'
    },
    {
        value: 2,
        label: '待发货'
    },
    {
        value: 10,
        label: '待提货'
    },
    {
        value: 3,
        label: '待收货'
    },
    {
        value: 11,
        label: '已提货'
    },
    {
        value: 4,
        label: '已收货'
    },

    {
        value: 8,
        label: '已关闭'
    },
    {
        value: 9,
        label: '已完成'
    }
];
const formRef = ref();
const Data = reactive({
    timeList: [
        { label: '今天', value: 0, active: false },
        { label: '昨天', value: -1, active: false },
        { label: '近7天', value: -7, active: false },
        { label: '近30天', value: -30, active: false }
    ],
    tableList: [],
    totalCount: 0
});

const clickSearchTime = (index, item) => {
    if (item.active) {
        Data.timeList[index].active = false;
        searchForm.createdAt = [];
    } else {
        Data.timeList.map(el => (el.active = false));
        Data.timeList[index].active = true;
        searchForm.createdAt = [
            new Date(new Date().setHours(0, 0, 0) + 24 * 60 * 60 * 1000 * Data.timeList[index].value),
            index === 1
                ? new Date(new Date().setHours(23, 59, 59) + 24 * 60 * 60 * 1000 * Data.timeList[index].value)
                : new Date(new Date().setHours(23, 59, 59))
        ];
        dateChange(searchForm.createdAt, 1);
    }
    getOrderList();
};

const dateChange = (val, type) => {
    if (!type) {
        Data.timeList.map(el => (el.active = false));
    }
    if (val) {
        searchForm.createdAtStart = format(val[0], 'YYYY-MM-DD HH:mm:ss');
        searchForm.createdAtEnd = format(val[1], 'YYYY-MM-DD') + ' 23:59:59';
    } else {
        searchForm.createdAtStart = '';
        searchForm.createdAtEnd = '';
    }
};

const pageChange = pageNum => {
    searchForm.page = pageNum;
    getOrderList();
};

const sizeChange = pageSize => {
    searchForm.perPage = pageSize;
    getOrderList();
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    Data.timeList.map(el => (el.active = false));
    searchForm.createdAtStart = '';
    searchForm.createdAtEnd = '';
};

const searchHandler = () => {
    searchForm.page = 1;
    getOrderList();
};

const getOrderList = async () => {
    let para = dealObjectEmptyValue(
        Object.assign({}, searchForm, {
            createdAt: [searchForm.createdAtStart, searchForm.createdAtEnd],
            createdAtStart: '',
            createdAtEnd: ''
        })
    );
    if (!searchForm.createdAtStart || !searchForm.createdAtEnd) {
        delete para.createdAt;
    }
    const { data } = await request('incomeIncomeServ', para);
    Data.tableList = data?.list || [];
    Data.totalCount = data.totalCount || 0;
};

/* 获取店铺列表 */
const shopList = reactive([]);
const onSelectShop = async () => {
    if (shopList.length) return;
    const { data } = await getShopListHook();
    let list = data.list || [];
    shopList.push(...list);
};

const orderExport = async () => {
    let para = dealObjectEmptyValue(
        Object.assign({}, searchForm, {
            createdAt: [searchForm.createdAtStart, searchForm.createdAtEnd],
            createdAtStart: '',
            createdAtEnd: ''
        })
    );
    if (!searchForm.createdAtStart || !searchForm.createdAtEnd) {
        delete para.createdAt;
    }
    const res = await request('incomeIncomeExportServ', para);
    exportExc(res, '订单收入导出');
};

const viewDetail = row => {
    window.open(location.origin + `/order/list/detail?orderId=${row.id}&shopId=${row.shopId}`);
};

onMounted(() => {
    onSelectShop();
    searchHandler();
});
</script>
<style lang="scss" scoped>
.order-income {
    .search-form {
        background-color: #ffffff;
        .search-time {
            display: inline-flex;
            .search-time-item {
                width: 72px;
                height: 30px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #eaeaea;
                text-align: center;
                line-height: 30px;
                color: #33302d;
                margin-left: 12px;
            }
            .search-time-item-active {
                color: #ff6b00;
                background: #ffffff;
                border-color: #ff6b00;
            }
            .search-time-item:hover {
                cursor: pointer;
            }
        }
        .search-act {
            margin-left: 10px;
            font-size: 14px;
            line-height: 30px;
            color: #ff6b00;
            cursor: pointer;
        }
    }
    .el-table {
        box-shadow: none;
        :deep(.el-table__empty-block) {
            border-bottom: 1px solid #eaeaea;
        }
    }
    .link {
        color: #ff6b00;
        cursor: pointer;
    }
    .left {
        text-align: left;
    }
    .tip {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
